<template>
	<div id="login">
		<mainHeader></mainHeader>
		<div id="mai-register">
			<div class="wrapper">
				<div class="container">
					<h1>Welcome</h1>
					<form class="form">
						<button @click="changeType(1)">
              <!--账号登录-->
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shoujihaodenglu"></use>
              </svg>
            </button>
						<button @click="changeType(2)">
              <!--手机登录-->
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhanghaomimadenglu"></use>
              </svg>
            </button>
						<p id="tp" :class="states == 200?'bg-success':'bg-error'" v-if='hide'>{{tipsMsg}}</p>
						<div class="inp type1" v-if="typeShow">
							<input type="text" placeholder="手机号" v-model="telephone">

							<input type="text" class="checkput1" style="margin-right: 20px;margin-left:0px
              ;display: inline-block;" placeholder="验证码" v-model="checkCodeOfPhone">
							<button class="checkBtn" style="width: 90px;" v-show="show" @click="send()">发送</button>
							<button class="checkBtn1" style="width: 140px;" v-show="!show">重发({{count}}秒)</button>
							<div>
								<button id="regist-button" style="" @click="phoneLogin()">登陆</button>
							</div>
						</div>
						<div class="inp type2" v-if="!typeShow">
							<input type="text" placeholder="手机号" v-model="telephone">
							<input type="password" placeholder="密码" v-model="password">
							<input type="text" class="checkput2" placeholder="验证码" style="margin-right: 20px;margin-left:0px
              ;display: inline-block;" v-model="checkCodeOfPass">
							<img id="img" @click="changeCode()" width="90" height="47" style="margin-bottom: 2px;" src="/login/validateImg" />
							<div>
								<button id="regist-button" style="" @click="passLogin()">登陆</button>
							</div>
						</div>
					</form>
				</div>
				<ul class="bg-bubbles">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>

			</div>
		</div>
		<!--<mainFooter class="mainFooter"></mainFooter>-->
	</div>
</template>

<script>
	import mainHeader from '@/components/mainHeader'
	import mainFooter from '@/components/mainFooter'
	import bus from '../bus.js'

	export default {
		name: 'detail',
		data() {
			return {
				password: '',
				telephone: '',
				checkCodeOfPhone: '',
				checkCodeOfPass: '',
				show: true,
				count: '',
				timer: null,
				typeShow: true,
				tipsMsg: '',
				hide:false,
				states:'',
			}
		},
		components: {
			mainHeader,
			mainFooter
		},
		mounted() {
			console.log(document.getElementsByTagName('body'))
			document.getElementsByTagName('body')[0].style.overflow = 'hidden';
		},
		methods: {
			send() {
				console.log(this.telephone);
				if(!(/^1(3|4|5|7|8)\d{9}$/.test(this.telephone))) {
					this.states = 400;
					this.hide = true;
					this.tipsMsg = "手机号码格式有误，请重新填写";
					var _this = this;
					setTimeout(function(){
						_this.hide = false;
						},2000)
					return;
				}
//				//请求短信发送接口
//				this.$axios.get("/login/send/" + this.telephone, {}).then(res => {
//					console.log(res);
//				});
				const TIME_COUNT = 60;
				if(!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if(this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}

			},
			phoneLogin() {
				console.log(this.telephone);
				console.log(this.checkCodeOfPhone);
				var _this = this;
				this.$axios.post("/login/phone", {
					"telephone": this.telephone,
					"checkCode": this.checkCodeOfPhone
				}).then(res => {
					_this.states = res.data.status; 
					_this.hide = true;
					if(res.data.status == 200) {
						var token = res.data.data;
						//本地存储token
						localStorage.setItem("token", token);
						//跳转至首页
						_this.$router.push({name:'home',params:{}});
					} else {
						_this.tipsMsg = res.data.msg;
						setTimeout(function(){
							_this.hide = false;
						},2000)
					}
				});
			},
			passLogin() {
				console.log(this.telephone);
				console.log(this.checkCodeOfPass);
				var _this = this;
				this.$axios.defaults.withCredentials = true;
				this.$axios.post("/login/pass", {
					"telephone": this.telephone,
					"checkCode": this.checkCodeOfPass,
					"password": this.password
				}).then(res => {
					_this.states = res.data.status; 
					_this.hide = true;
					if(res.data.status == 200) {
						var token = res.data.data;
						//本地存储token
						localStorage.setItem("token", token);
						//跳转至首页
						_this.$router.push({name:'home',params:{}});
					} else {
						_this.tipsMsg = res.data.msg;
						setTimeout(function(){
							_this.hide = false;
						},2000)
					}
				});
			},
			changeCode() {
				document.getElementById("img").src = '/login/validateImg?data=' + new Date().getTime();
			},
			changeType(type) {
				this.tipsMsg = '';
				this.telephone = '';
				this.checkCodeOfPhone = '';
				if(type == 1) {
					this.typeShow = true;
				} else {
					this.typeShow = false;
				}
			}
		},
		computed: {}

	}

	$('#login-button').click(function(event) {
		event.preventDefault();
		$('form').fadeOut(500);
		$('.wrapper').addClass('form-success');
	});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import url("../../static/css/styles.css");
	#register {
		width: 100%;
	}
	
	body,
	td,
	th {
		font-family: "Source Sans Pro", sans-serif;
	}
	
	body {
		background-color: #2B2B2B;
	}
	
	.mainFooter {
		background: #FF4F01;
		position: relative;
		clear: both;
	}
	
	.wrapper {
		top: 300px;
		height: 1200px;
	}
	
	.wrapper input {}
	
	
	.checkput1 {
		width: 100px !important;
		margin-left: -131px !important;
	}
	
	.checkput2 {
		width: 139px !important;
    margin-left: 2px !important;
	}
	
	.checkBtn {
		position: absolute;
		top: 178px;
		left: 335px;
	}
	.checkBtn1 {
		position: absolute;
		top: 178px;
		left: 285px;
	}
	
	.icon {
		width: 56px;
		height: 56px;
	}
	
	.inp {
		margin-top: 20px;
	}
	#login{
		padding-top: 100px;
	}
	
	#tp{
		position: fixed;
		left: 0;
		top: 102px;
		right: 0;
		border-bottom: 0;
		margin: auto;
		z-index: 999999;
		width: 240px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		font-size: 16px;
		color: #fff;
	}
	
	.bg-success{
		background: #409eff;
	}
	.bg-error{
		background: #F56C6C;
	}
</style>